<template>
  <div style="padding: 14px 14px 0">
    <RouteTitle :isBack="true" />
    <a-space class="mt-20">
      <a-button
        type="primary"
        style="border: none; border-radius: 6px"
        @click="() => (visible = true)"
      >
        创建分组
      </a-button>
      <!-- <a-button
        type="default"
        @click="find"
        class="btn-primary"
        :class="isMy ? 'primry-full' : ''"
        >查看我创建的分组</a-button
      > -->
    </a-space>

    <a-table
      class="mt-20"
      :loading="loading"
      :dataSource="list"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key == 'title'">
          <div class="text-overflow" :title="text">{{ text }}</div>
        </template>
        <template v-if="column.key == 'number'">
          <span>{{
            record.platform_account_group_relation
              ? record.platform_account_group_relation.length
              : 0
          }}</span>
        </template>
        <template v-if="column.key == 'account'">
          <a-popover v-if="record.platform_account_group_relation.length > 3">
            <template #content>
              <div class="operation-area">
                <div
                  class="account-item"
                  v-for="(
                    item, index
                  ) in record.platform_account_group_relation"
                  :key="item.id"
                >
                  <close-circle-outlined
                    class="close-icon"
                    @click="delAccount(index)"
                  />

                  <a-tooltip>
                    <template #title>{{
                      item.platform_account_user?.nickname
                    }}</template>
                    <div class="user-avar">
                      <img
                        :src="item.platform_account_user?.avatar"
                        class="user-icon"
                      />
                      <img
                        :src="item.platform_account_user?.platform?.image"
                        class="platform-icon"
                      />
                    </div>
                  </a-tooltip>
                </div>
              </div>
            </template>
            <div class="operation-area">
              <div
                class="account-item"
                v-for="(
                  item, index
                ) in record.platform_account_group_relation.slice(0, 3)"
                :key="item.id"
              >
                <close-circle-outlined
                  class="close-icon"
                  @click="delAccount(index)"
                />

                <a-tooltip>
                  <template #title>{{
                    item.platform_account_user.nickname
                  }}</template>
                  <div class="user-avar">
                    <img
                      :src="item.platform_account_user?.avatar"
                      class="user-icon"
                    />
                    <img
                      :src="item.platform_account_user?.platform?.image"
                      class="platform-icon"
                    />
                  </div>
                </a-tooltip>
              </div>
              <div style="align-self: center">...</div>
            </div>
          </a-popover>
          <template v-else>
            <div
              class="operation-area"
              v-if="record.platform_account_group_relation.length > 0"
            >
              <div
                class="account-item"
                v-for="(item, index) in record.platform_account_group_relation"
                :key="item.id"
              >
                <close-circle-outlined
                  class="close-icon"
                  @click="delAccount(index)"
                />

                <a-tooltip>
                  <template #title>{{
                    item.platform_account_user?.nickname
                  }}</template>
                  <div class="user-avar">
                    <img
                      :src="item.platform_account_user?.avatar"
                      class="user-icon"
                    />
                    <img
                      :src="item.platform_account_user?.platform?.image"
                      class="platform-icon"
                    />
                  </div>
                </a-tooltip>
              </div>
            </div>
            <div v-else>--</div>
          </template>
        </template>
        <template v-if="column.key == 'action'">
          <a-button @click="edit(record)">编辑</a-button>
          <a-button type="primary" class="ml-5" @click="del(record.id)"
            >删除</a-button
          >
        </template>
      </template>
    </a-table>
    <!-- 添加分组 -->
    <AddGroup
      v-model:visible="visible"
      :groupName="groupName"
      :editId="editId"
      :accounts="chooseAccount"
      @created="createSuccess"
      @clear="clear"
    ></AddGroup>
  </div>
</template>

<script>
import { reactive, toRefs, watch, computed } from "vue";
import {
  ReloadOutlined,
  SearchOutlined,
  DownOutlined,
  PlusOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";
import AddGroup from "./modules/AddAcountGroup.vue";
import request from "@/common/utils/request";
import { Modal, notification, message } from "ant-design-vue";
export default {
  name: "AccountGroupList",
  components: {
    AddGroup,
  },
  setup() {
    const state = reactive({
      isMy: false, //是否查询我创建的分组
      total: 0,
      pageSize: 10,
      page: 1,
      groupName: "",
      chooseAccount: [],
      editId: "",
      visible: false,
      list: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          width: 100,
        },
        {
          title: "分组",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
        },
        {
          title: "账号数",
          dataIndex: "number",
          key: "number",
        },
        {
          title: "账号详情",
          dataIndex: "account",
          key: "account",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: 180,
        },
      ],
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getList();
    };
    const getList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      if (state.isMy) {
        params.is_creator = 1;
      } else {
        params.is_creator = 0;
      }
      state.loading = true;
      request
        .get("/work_ai", "/org/platformAccount/group/list", params)
        .then((res) => {
          if (res.list) {
            state.list = res.list;
          }
          state.total = res.total;
          state.loading = false;
        });
    };
    getList();
    const createSuccess = () => {
      getList();
      state.visible = false;
    };
    const find = () => {
      state.page = 1;
      state.isMy = !state.isMy;
      getList();
    };
    const del = (id) => {
      Modal.confirm({
        title: () => `确定要删除吗？`,
        cancelText: "取消",
        okText: "确定",
        centered: true,
        onOk() {
          request
            .del("/work_ai", "/org/platformAccount/group/delete", {
              id,
            })
            .then((res) => {
              message.success("删除成功");
              state.page = 1;
              getList();
            });
        },
      });
    };
    const edit = (record) => {
      state.editId = record.id;
      state.groupName = record.title;
      let accounts = [];
      if (record.platform_account_group_relation.length) {
        accounts = record.platform_account_group_relation.map((item) => {
          return item.platform_account_user;
        });
      }
      state.chooseAccount = accounts;
      state.visible = true;
    };
    const clear = () => {
      state.groupName = "";
      state.chooseAccount = [];
      state.editId = "";
    };
    return {
      ...toRefs(state),
      pagination,
      handleTableChange,
      createSuccess,
      find,
      del,
      edit,
      clear,
    };
  },
};
</script>

<style lang="less" scoped>
button {
  border-radius: 5px;
}
.operation-area {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
}
.account-list {
  display: flex;
  flex-wrap: wrap;
}
.account-item {
  position: relative;
  display: flex;
  flex-direction: column;

  align-items: center;
  margin: 8px;
}
.close-icon {
  position: absolute;
  top: -8px;
  right: 0;
  font-size: 12px;
  z-index: 2;
  visibility: hidden;
  cursor: pointer;
}
.user-avar {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.account-item:hover .close-icon {
  visibility: visible;
}
.user-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 50%;
}
.platform-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.user-name {
  width: 80px;
  text-align: center;
}
.text-overflow {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-primary {
  color: var(--ss-primary-color);
  border-color: var(--ss-primary-color);
}
.primry-full {
  color: #fff;
  background-color: var(--ss-primary-color);
}
</style>
